<template>
  <div class="menu-view">
    <div class="flex mb-4">
      <el-button
        type="primary"
        icon="Plus"
        size="small"
        @click="addMenuDialog.show(null)"
      >
        新增
      </el-button>
    </div>
    <Table
      ref="tableRef"
      :data="tableData"
      row-key="id"
      :select-column="false"
      max-height="calc(100vh - 220px)"
      :tree-props="{
        children: 'children',
        hasChildren: 'isChild',
      }"
    >
      <TableColumn
        prop="name"
        label="菜单标题"
        align="left"
        :min-width="getColumnWidth(tableData, 'name', 100)"
      />
      <TableColumn label="图标" :min-width="50">
        <template #default="{ row }">
          <template v-if="row.icon">
            <i v-if="row.icon.indexOf('bi') !== -1" :class="row.icon" />
            <i
              v-else-if="row.icon.indexOf('iconfont') !== -1"
              :class="row.icon"
            />
          </template>
        </template>
      </TableColumn>
      <TableColumn label="排序" prop="orderNum" :min-width="100" />
      <TableColumn label="类型" :min-width="100">
        <template #default="{ row }">
          <el-tag v-if="row.menuType === 'M'" type="warning">目录</el-tag>
          <el-tag v-else-if="row.menuType === 'C'" type="success">菜单</el-tag>
          <el-tag v-else-if="row.menuType === 'F'" type="primary">按钮</el-tag>
        </template>
      </TableColumn>
      <TableColumn
        label="权限标识"
        prop="perms"
        :min-width="getColumnWidth(tableData, 'perms', 100)"
      />
      <TableColumn
        label="组件路径"
        prop="path"
        :min-width="getColumnWidth(tableData, 'path', 100)"
      />
      <TableColumn label="可见性" :min-width="100">
        <template #default="{ row }">
          {{ row.hidden === 0 ? '是' : '否' }}
        </template>
      </TableColumn>
      <TableColumn label="操作" fixed="right" :min-width="230">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            :disabled="row.menuType === 'F'"
            @click="addMenuDialog.show(row.id)"
          >
            新增
          </el-button>
          <el-button
            type="warning"
            size="small"
            @click="addMenuDialog.show(row)"
          >
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="handleClickDelete(row)">
            删除
          </el-button>
        </template>
      </TableColumn>
    </Table>
    <AddMenuDialog
      ref="addMenuDialog"
      :parentTree="tableData"
      :power-type="queryData.type"
      @update="getInfo"
    />
  </div>
</template>
<script setup lang="ts">
import { deleteMenuById, getMenuList } from '@/api/sys/menu'
import { onMounted, reactive, ref, useTemplateRef } from 'vue'
import AddMenuDialog from '@/views/sys/menu/AddMenuDialog.vue'
import { ElMessageBox } from 'element-plus'
import Table from '@/components/table/Table.vue'
import TableColumn from '@/components/table/TableColumn.vue'
import { getColumnWidth } from '@/plugins/util'
import { Message } from '@/hooks/message'

const addMenuDialog =
  useTemplateRef<InstanceType<typeof AddMenuDialog>>('addMenuDialog')

const queryData = reactive({
  type: '2',
})

const tableData = ref([])

async function handleClickDelete(row: any) {
  ElMessageBox.confirm(`确定要删除 ${row.name} 吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const { data } = await deleteMenuById(row.id)
    if (data.status === 200) {
      Message({
        message: data.message,
        type: 'success',
      })
      await getInfo()
    }
  })
}

async function getInfo() {
  const { data } = await getMenuList(queryData)
  if (data.status === 200) {
    tableData.value = data.data
  }
}

function reset() {
  Object.assign(queryData, {
    type: '1',
  })
  getInfo()
}

onMounted(async () => {
  await getInfo()
})
</script>

<style scoped lang="scss"></style>
